<template>
  <el-carousel trigger="click" height="415px" :interval="4000">
    <el-carousel-item v-for="item in dirs" :key="item.id">
      <div class="name">{{ item.showName }}</div>
      <div :id="item.id" style="width: 600px;height: 370px"></div>
    </el-carousel-item>
  </el-carousel>
</template>

<script>

import { getFirstLevelDirectory, knowledgePrecipitation } from '@/api';

let style = {
  fontSize: 24,
};
import * as echarts from 'echarts';

export default {
  data() {
    return {
      options: {},
      allData: {},
      dirs: [],
    };
  },
  props: ['termId'],
  async created() {

  },
  async mounted() {
    this.dirs = await getFirstLevelDirectory();
    console.log('this.dirs', this.dirs);
    this.$nextTick(() => {
      this.getData();
    });
  },
  beforeDestroy() {
  },
  methods: {
    getData(id) {
      this.dirs.forEach(i => {
        knowledgePrecipitation(i.id).then(res => {
          this.initChart(res.data, i.id);
        });
      });

    },
    initChart(items, id) {
      var myChart = this.$echarts.init(document.getElementById(id));
      let xAxisData = [], seriesData = [];
      items.forEach((item, ix) => {
        xAxisData.push(item.name);
        seriesData.push(item.number);
      });
      let option = {
        tooltip: {
          trigger: 'axis',
          border: 0,
          boxShadow: ' 0 0 10px rgb(0,153,184) inset,0 0 30px rgb(0,153,184)',
          borderRadius: 4,
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          top: 25,
          left: '0%',
          right: 20,
          bottom: '0%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          boundaryGap: [0, 0.01],
          axisLine: {
            //x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: 'rgba(219,225,255,1)',
              width: 0,
              type: 'solid',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: 'rgba(219,225,255,1)',
            },
          },
          splitLine: {
            //分割线配置
            show: true,
            lineStyle: {
              color: 'rgba(219,225,255,1)',
              type: 'dashed',
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: '#fff',
              margin: 15,
            },

          },
        },
        series: [
          {
            name: '知识沉淀',
            type: 'bar',
            data: seriesData,
            showBackground: true,
            stack: 'Total',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                { offset: 0, color: '#019ac8' },
                { offset: 1, color: '#0af1c3' },
              ]),
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    clearData() {
    },
  },
};
</script>
<style lang='scss' scoped>
.name {
  text-align: center;
  font-size: 21px;
  font-weight: 700;
}

.top {
  display: flex;
  align-items: center;
  justify-content: center;

  .num-bg {
    width: 180px;
    margin: 0 12px;
    height: 77px;
    background-image: url("~@/assets/img/计数框.png");
    background-size: cover;
    background-position: center center;

    .text {
      font-family: YouSheBiaoTiHei;
      font-size: 22px;
      text-align: center;
      margin-top: 8px;
      font-weight: 700;
      font-stretch: normal;
      line-height: 24px;
      letter-spacing: 0px;
      color: #ffffff;
      background-image: -webkit-linear-gradient(bottom, #5197FF, #80F2FF);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent

    }

    .num {
      font-family: YouSheBiaoTiHei;
      font-size: 32px;
      text-align: center;
      margin-top: 10px;
      font-weight: 700;
      font-stretch: normal;
      line-height: 20px;
      letter-spacing: 0px;
      color: #fff43f;
    }
  }
}

.pie {
  width: 100%;
  height: calc(100% - 80px)
}
</style>
